<template>
  <div class="admin-body">
    <el-row>
      <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>消费者管理</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>
    <el-row style="padding: 15px">
      <el-row class="main">
        <!--顶部-->
        <el-row style="padding-bottom: 10px;text-align: left">
          <el-input placeholder="用户电话或昵称" v-model="selectkey" class="input-with-select" style="width: 200px">
          </el-input>
          <el-button type="primary" @click="getstart()">搜索</el-button>
        </el-row>
        <!--表格-->
        <el-table
          border
          align="left"
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="nickname"
            label="用户昵称">
          </el-table-column>
          <el-table-column
            label="头像">
            <template slot-scope="scope">
              <el-popover
                v-if="scope.row.img"
                placement="bottom"
                trigger="hover">
                <div style="height: 300px;overflow-y: auto">
                  <img v-for="i in scope.row.img.split(',')" :src="i" alt="" width="300px" style="display: block">
                </div>
                <!--<el-button slot="reference" size="small" type="text">查看图片</el-button>-->
                <img slot="reference" :src="scope.row.img.split(',')[0]" alt="" width="60px" height="60px">
              </el-popover>
              <span v-if="!scope.row.img">无</span>
            </template>
          </el-table-column>
          <el-table-column
            label="会员等级">
            <template slot-scope="scope">
              {{ vipLevelType[scope.row.vip_level] }}
            </template>
          </el-table-column>
          <el-table-column
            label="个性签名">
            <template slot-scope="scope">
              <el-popover
                placement="bottom"
                trigger="click">
                <div style="max-width: 300px;max-height: 300px;overflow-y: auto">{{scope.row.signature}}</div>
                <div slot="reference"
                     style="width: 100%;overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;">
                  {{scope.row.signature}}
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column
            prop="phone"
            label="电话">
          </el-table-column>
          <el-table-column
            prop="integral"
            label="积分">
          </el-table-column>
          <el-table-column
            prop="recharge"
            label="累计充值">
          </el-table-column>
          <el-table-column
            prop="consume_number"
            label="消费总次数">
          </el-table-column>
          <el-table-column
            prop="violate_number"
            label="违约总次数">
          </el-table-column>
          <el-table-column
            label="状态">
            <template slot-scope="scope">
              <span :style="{ 'color':scope.row.state=='1'?'#67C23A':scope.row.state=='2'?'#E6A23C':'#F56C6C'}">
                    {{scope.row.state==1?'正常':scope.row.state==2?'冻结':scope.row.state==0?'删除':'状态数据异常'}}
             </span>
              <el-button @click="changeMes(scope.row.user_id)" size="small" type="text" v-if="scope.row.state!=2" style="color: #F56C6C">拉黑</el-button>
              <el-button @click="submitState(1,scope.row.user_id)" size="small" type="text" v-if="scope.row.state!=1" style="color: #67C23A">恢复</el-button>
            </template>
          </el-table-column>
          <el-table-column
            label="消费总次数">
            <template slot-scope="scope">
              <el-button @click=" goHref('clientTimes',scope.row.user_id)">查看</el-button>
            </template>
          </el-table-column>
          <el-table-column
            label="充值记录">
            <template slot-scope="scope">
              <el-button @click=" goHref('clientCharge',scope.row.user_id)">查看</el-button>
            </template>
          </el-table-column>
          <el-table-column
            label="注册时间">
            <template slot-scope="scope">
              {{ toDate(scope.row.register_time) }}
            </template>
          </el-table-column>
          <el-table-column
            label="会员过期时间">
            <template slot-scope="scope">
              {{ toDate(scope.row.vip_exptime) }}
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <el-row style="margin-top: 20px">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" align="right">
            <el-pagination
              style="text-align: right"
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="dataTotal">
            </el-pagination>
          </el-col>
        </el-row>

        <!--拉黑日期范围选择-->
        <el-dialog title="拉黑日期范围选择" :visible.sync="dateVisible" width="380px" :modal-append-to-body="false">
          <el-date-picker
            v-model="dateValue"
            type="datetime"
            value-format="timestamp"
            placeholder="选择日期时间">
          </el-date-picker>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dateVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitState(2)">确 定</el-button>
          </div>
        </el-dialog>

      </el-row>
    </el-row>
  </div>
</template>

<script>

  export default {
    name: "ClientList",
    mounted() {
      if (!this.$store.state.login.in) {
        this.$router.push({name: "login", params: {userId: 123}})
      }
      this.getstart()
    },
    data() {
      return {
        tableData: [],
        pageSize: 10,
        currentPage: 1,
        dataTotal: 0,
        vipLevelType: {0: '无', 1: '初级', 2: '中级', 3: '高级'},
        dateVisible: false,
        dateValue: '',
        userId: '',
        selectkey: '',
      }
    },
    methods: {
      //绑定表格数据，分页
      getstart() {
        let thi = this
        const prams = {
          page: thi.currentPage, /*当前页码*/
          pageSize: thi.pageSize, /*每页显示多少条数据*/
          key:thi.selectkey
        }
        thi.mySelectAll('userList', prams).then(function (value) {
          thi.tableData = value.data
          thi.dataTotal = value.Total
        })
      },
      //状态改变提示
      changeMes(id) {
        this.userId = id
        this.dateVisible = true
      },
      //状态改变
      submitState(state, id) {
        let thi = this
        const por = {
          user_id: id || this.userId,
          state: state,
          forbidden_time: this.dateValue ? parseInt(this.dateValue / 1000) : '',
        }
        thi.mySubmit('editUserState', por).then(function (code) {
          if (code == 200) {
            thi.getstart()
          }
        })
      },

      //选择展示数量
      handleSizeChange(val) {
        this.pageSize = val
        this.getstart()
      },
      //分页
      handleCurrentChange(val) {
        this.currentPage = val
        this.getstart()
      },
    }
  }

</script>

<style scoped>
  .main {
    background-color: white;
    min-height: 500px;
    padding: 10px;
    border: #EDEDED 1px solid;
    border-radius: 5px;
  }
</style>
